﻿<UserControl
    x:Class="WinRTXamlToolkit.Sample.Views.ColorPickerPrimitivesTestView"
    IsTabStop="false"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:WinRTXamlToolkit.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <UserControl.Resources>
        <Style
            x:Key="stretchySliderStyle"
            TargetType="Slider">
            <Setter
                Property="Template">
                <Setter.Value>
                    <ControlTemplate
                        TargetType="Slider">
                        <Grid
                            Margin="{TemplateBinding Padding}">
                            <Grid.Resources>
                                <Style
                                    x:Key="SliderThumbStyle"
                                    TargetType="Thumb">
                                    <Setter
                                        Property="BorderThickness"
                                        Value="1" />
                                    <Setter
                                        Property="BorderBrush"
                                        Value="{StaticResource SliderThumbBorderThemeBrush}" />
                                    <Setter
                                        Property="Background"
                                        Value="{StaticResource SliderThumbBackgroundThemeBrush}" />
                                    <Setter
                                        Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate
                                                TargetType="Thumb">
                                                <Border
                                                    BorderBrush="{TemplateBinding BorderBrush}"
                                                    BorderThickness="{TemplateBinding BorderThickness}"
                                                    Background="{TemplateBinding Background}" />
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </Grid.Resources>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup
                                    x:Name="CommonStates">
                                    <VisualState
                                        x:Name="Normal" />
                                    <VisualState
                                        x:Name="Pressed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetProperty="BorderBrush"
                                                Storyboard.TargetName="HorizontalThumb">
                                                <DiscreteObjectKeyFrame
                                                    KeyTime="0"
                                                    Value="{StaticResource SliderThumbPressedBorderThemeBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState
                                        x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetProperty="Stroke"
                                                Storyboard.TargetName="HorizontalBorder">
                                                <DiscreteObjectKeyFrame
                                                    KeyTime="0"
                                                    Value="{StaticResource SliderDisabledBorderThemeBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetProperty="Fill"
                                                Storyboard.TargetName="HorizontalDecreaseRect">
                                                <DiscreteObjectKeyFrame
                                                    KeyTime="0"
                                                    Value="{StaticResource SliderTrackDecreaseDisabledBackgroundThemeBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetProperty="Fill"
                                                Storyboard.TargetName="HorizontalTrackRect">
                                                <DiscreteObjectKeyFrame
                                                    KeyTime="0"
                                                    Value="{StaticResource SliderTrackDisabledBackgroundThemeBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetProperty="Background"
                                                Storyboard.TargetName="HorizontalThumb">
                                                <DiscreteObjectKeyFrame
                                                    KeyTime="0"
                                                    Value="{StaticResource SliderThumbDisabledBackgroundThemeBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetProperty="BorderBrush"
                                                Storyboard.TargetName="HorizontalThumb">
                                                <DiscreteObjectKeyFrame
                                                    KeyTime="0"
                                                    Value="{StaticResource SliderThumbDisabledBackgroundThemeBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState
                                        x:Name="PointerOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetProperty="Background"
                                                Storyboard.TargetName="HorizontalThumb">
                                                <DiscreteObjectKeyFrame
                                                    KeyTime="0"
                                                    Value="{StaticResource SliderThumbPointerOverBackgroundThemeBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetProperty="BorderBrush"
                                                Storyboard.TargetName="HorizontalThumb">
                                                <DiscreteObjectKeyFrame
                                                    KeyTime="0"
                                                    Value="{StaticResource SliderThumbPointerOverBorderThemeBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup
                                    x:Name="FocusStates">
                                    <VisualState
                                        x:Name="Focused">
                                        <Storyboard>
                                            <DoubleAnimation
                                                Duration="0"
                                                To="1"
                                                Storyboard.TargetProperty="Opacity"
                                                Storyboard.TargetName="FocusVisualWhiteHorizontal" />
                                            <DoubleAnimation
                                                Duration="0"
                                                To="1"
                                                Storyboard.TargetProperty="Opacity"
                                                Storyboard.TargetName="FocusVisualBlackHorizontal" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState
                                        x:Name="Unfocused" />
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Grid
                                x:Name="HorizontalTemplate"
                                Background="Transparent">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition
                                        Width="Auto" />
                                    <ColumnDefinition
                                        Width="Auto" />
                                    <ColumnDefinition
                                        Width="*" />
                                </Grid.ColumnDefinitions>
                                <Rectangle
                                    x:Name="HorizontalTrackRect"
                                    Fill="{TemplateBinding Foreground}"
                                    Grid.ColumnSpan="3" />
                                <Rectangle
                                    x:Name="HorizontalDecreaseRect"
                                    Fill="Transparent" />
                                <Rectangle
                                    x:Name="HorizontalBorder"
                                    Grid.ColumnSpan="3"
                                    Stroke="{TemplateBinding BorderBrush}"
                                    StrokeThickness="{TemplateBinding BorderThickness}" />
                                <Thumb
                                    x:Name="HorizontalThumb"
                                    Background="{StaticResource SliderThumbBackgroundThemeBrush}"
                                    Grid.Column="1"
                                    DataContext="{TemplateBinding Value}"
                                    Style="{StaticResource SliderThumbStyle}"
                                    Width="{StaticResource SliderTrackThemeHeight}" />
                                <Rectangle
                                    x:Name="FocusVisualWhiteHorizontal"
                                    Grid.ColumnSpan="3"
                                    IsHitTestVisible="False"
                                    Opacity="0"
                                    StrokeDashOffset="1.5"
                                    StrokeEndLineCap="Square"
                                    Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}"
                                    StrokeDashArray="1,1" />
                                <Rectangle
                                    x:Name="FocusVisualBlackHorizontal"
                                    Grid.ColumnSpan="3"
                                    IsHitTestVisible="False"
                                    Opacity="0"
                                    StrokeDashOffset="0.5"
                                    StrokeEndLineCap="Square"
                                    Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}"
                                    StrokeDashArray="1,1" />
                            </Grid>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition
                Width="2*" />
            <ColumnDefinition
                Width="Auto" />
        </Grid.ColumnDefinitions>
        <controls:HueRingPicker
            x:Name="hueRing"
            VerticalAlignment="Stretch"
            HorizontalAlignment="Stretch"
            ValueChanged="hueRing_ValueChanged_1" />
        <controls:TrianglePicker
            x:Name="trianglePicker"
            SizeChanged="trianglePicker_SizeChanged_1"
            Margin="0,115,0,0"
            Width="458"
            Height="396.6396"
            VerticalAlignment="Top">
            <controls:TrianglePicker.Foreground>
                <ImageBrush
                    x:Name="triangleBrush" />
            </controls:TrianglePicker.Foreground>
        </controls:TrianglePicker>
        <!--<Viewbox
                x:Name="slidersBox"
                Grid.Column="2"
                Stretch="Uniform">-->
        <StackPanel
            x:Name="slidersPanel"
            Margin="15,0,15,0"
            VerticalAlignment="Center"
            Grid.Column="2">
            <TextBlock
                Margin="0,15,0,0"
                Text="Hue" />
            <Slider
                Style="{StaticResource stretchySliderStyle}"
                Value="{Binding Value, ElementName=hueSlider, Mode=TwoWay}"
                Margin="0,0,80,5"
                Height="15"
                Minimum="0"
                Maximum="360"
                StepFrequency="1">
                <Slider.Foreground>
                    <ImageBrush
                        x:Name="hueBackground"
                        Stretch="Fill" />
                </Slider.Foreground>
            </Slider>
            <controls:NumericUpDown
                x:Name="hueSlider"
                ValueFormat="F0"
                Width="200"
                Minimum="0"
                Maximum="360"
                SmallChange="1"
                LargeChange="1" />

            <TextBlock
                Margin="0,15,0,0"
                Text="Saturation" />
            <Slider
                Style="{StaticResource stretchySliderStyle}"
                Value="{Binding Value, ElementName=saturationSlider, Mode=TwoWay}"
                Margin="0,0,80,5"
                Height="15"
                Minimum="0"
                Maximum="1"
                StepFrequency="0.001">
                <Slider.Foreground>
                    <ImageBrush
                        x:Name="saturationBackground"
                        Stretch="Fill" />
                </Slider.Foreground>
            </Slider>
            <controls:NumericUpDown
                x:Name="saturationSlider"
                ValueFormat="F3"
                Width="200"
                Minimum="0"
                Maximum="1"
                SmallChange="0.001"
                LargeChange="0.001" />

            <TextBlock
                Margin="0,15,0,0"
                Text="Lightness" />
            <Slider
                Style="{StaticResource stretchySliderStyle}"
                Value="{Binding Value, ElementName=lightnessSlider, Mode=TwoWay}"
                Margin="0,0,80,5"
                Height="15"
                Minimum="0"
                Maximum="1"
                StepFrequency="0.001">
                <Slider.Foreground>
                    <ImageBrush
                        x:Name="lightnessBackground"
                        Stretch="Fill" />
                </Slider.Foreground>
            </Slider>
            <controls:NumericUpDown
                x:Name="lightnessSlider"
                ValueFormat="F3"
                Width="200"
                Minimum="0"
                Maximum="1"
                SmallChange="0.001"
                LargeChange="0.001" />


            <TextBlock
                Margin="0,15,0,0"
                Text="Red" />
            <Slider
                Style="{StaticResource stretchySliderStyle}"
                Value="{Binding Value, ElementName=redSlider, Mode=TwoWay}"
                Margin="0,0,80,5"
                Height="15"
                Minimum="0"
                Maximum="1"
                StepFrequency="0.001">
                <Slider.Foreground>
                    <ImageBrush
                        x:Name="redBackground"
                        Stretch="Fill" />
                </Slider.Foreground>
            </Slider>
            <controls:NumericUpDown
                x:Name="redSlider"
                ValueFormat="F3"
                Width="200"
                Minimum="0"
                Maximum="1"
                SmallChange="0.001"
                LargeChange="0.001" />

            <TextBlock
                Margin="0,15,0,0"
                Text="Green" />
            <Slider
                Style="{StaticResource stretchySliderStyle}"
                Value="{Binding Value, ElementName=greenSlider, Mode=TwoWay}"
                Margin="0,0,80,5"
                Height="15"
                Minimum="0"
                Maximum="1"
                StepFrequency="0.001">
                <Slider.Foreground>
                    <ImageBrush
                        x:Name="greenBackground"
                        Stretch="Fill" />
                </Slider.Foreground>
            </Slider>
            <controls:NumericUpDown
                x:Name="greenSlider"
                ValueFormat="F3"
                Width="200"
                Minimum="0"
                Maximum="1"
                SmallChange="0.001"
                LargeChange="0.001" />

            <TextBlock
                Margin="0,15,0,0"
                Text="Blue" />
            <Slider
                Style="{StaticResource stretchySliderStyle}"
                Value="{Binding Value, ElementName=blueSlider, Mode=TwoWay}"
                Margin="0,0,80,5"
                Height="15"
                Minimum="0"
                Maximum="1"
                StepFrequency="0.001">
                <Slider.Foreground>
                    <ImageBrush
                        x:Name="blueBackground"
                        Stretch="Fill" />
                </Slider.Foreground>
            </Slider>
            <controls:NumericUpDown
                x:Name="blueSlider"
                ValueFormat="F3"
                Width="200"
                Minimum="0"
                Maximum="1"
                SmallChange="0.001"
                LargeChange="0.001" />
        </StackPanel>
        <!--</Viewbox>-->
    </Grid>
</UserControl>
